<script lang="ts" setup>
</script>
<template>
    <div class="brid">
        <div class="line">
            <div class="left">
                <span class="l"></span>
            </div>
            <div class="right">
                <span class="r"></span>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.brid {
    position: relative;
    height: 32px;
    margin-top: 30px;

    .line {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #FFA57D;
        border: 2px solid rgb(255, 255, 255);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 0px 1px 1px #ffa47d75;

        .left,
        .right {
            width: 60px;
            height: 3px;
            background-color: #FFA57D;
            top: 10px;
            position: absolute;
        }


        .left {
            left: 1px;
            transform-origin: left;
            transform: rotate(325deg);
        }

        .right {
            right: 1px;
            transform-origin: right;
            transform: rotate(35deg);
        }

        span {
            position: absolute;
            width: 55px;
            height: 3px;
            top: 0;
            display: inline-block;
        }

        .r {
            left: 0;
            background-image: -webkit-linear-gradient(right, #fff -5%, #FFA57D 100%, #fff 100%);
            transform-origin: left;
            transform: rotate(145deg);
        }

        .l {
            right: 0;
            background-image: -webkit-linear-gradient(left, #fff -5%, #FFA57D 100%, #fff 100%);
            transform-origin: right;
            transform: rotate(215deg);
        }

    }
}
</style>